<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/before/css/style.css" rel="stylesheet" type="text/css" />
    <link href="/before/css/common.css" rel="stylesheet" tyle="text/css" />
    <link href="/before/css/Orders.css" rel="stylesheet" type="text/css" />
    <script src="/before/js/jquery.min.1.8.2.js" type="text/javascript"></script>
    <script src="/before/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/before/js/jquery.reveal.js" type="text/javascript"></script>
    <script src="/before/js/jquery.sumoselect.min.js" type="text/javascript"></script>
    <script src="/before/js/common_js.js" type="text/javascript"></script>
    <script src="/before/js/footer.js" type="text/javascript"></script>
    <script src="/before/js/jquery.jumpto.js" type="text/javascript"></script>
    <!--引用vue的js-->
    <script src="/after/js/vue/vue.min.js"></script>
    <!--分页插件-->
    <script src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/after/js/layer/layer.js" charset="utf-8"></script>
    <title>确认订单</title>
</head>
<script type="text/javascript">
    $(document).ready(function () {
        window.asd = $('.SlectBox').SumoSelect({ csvDispCount: 3 });
        window.test = $('.testsel').SumoSelect({okCancelInMulti:true });
    });
</script>
<body>
<!--头-->
<div id="top"></div><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--*****************************************************************************************************************************-->
<div class="Inside_pages  clearfix">
    <div class="Process"></div>
    <div class="Orders_style clearfix">
        <div class="address clearfix">
            <div class="title">
                <h2>收货人信息</h2>
                <a href="javascript:openAddress();" style="float: right;"><h3>+添加地址</h3></a>
            </div>
            <div class="adderss_list clearfix" id="Orders">
                <div class="title_name">
                    <h3>选择收货地址</h3>
                </div>
                <div class="list" id="select" >
                    <#list result as item>
                        <ul class="confirm" onclick="huoquid(${item_index});">
                            <div class="default">
                                <a href="javascript:void(0);" onclick="changeColor(this);" class="diz">地址</a>
                            </div>
                            <div class="adderss_operating">
                                <div class="Operate">
                                    <a href="index.ftl" class="delete_btn"></a>
                                    <a href="LJproduct_list.ftl" class="modify_btn"></a>
                                </div>
                            </div>
                            <div class="user_address">
                                <li>${item.uname}</li>
                                <li>${item.address}</li>
                                <li class="Postcode">000000</li>
                                <li>${item.phone}</li>
                            </div>
                        </ul>
                    </#list>
                </div>
            </div>
        </div>
        <form class="form" method="post" id="shops">
            <fieldset>
                <!--*************************************************************************************************************************-->
                <!--快递选择-->
                <div class="express_delivery">
                    <div class="title_name">选择快递方式</div>

                    <ul class="dowebok">
                        <li>
                            <input type="radio" name="radio" data-labelauty="圆通快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                                <p><a href="javascript:void(0);">点击查看是否在配送范围内</a></p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="中通快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="申通快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="邮政EMS">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="城际快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：同城包邮</p>

                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="韵达快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="国通快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="顺丰快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满88元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="邮政小包">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" name="radio" data-labelauty="天天快递">
                            <div class="description">
                                <em class="arrow"></em>
                                <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                <p>资费：15元</p>
                                <p class="Note">满68元包邮</p>
                            </div>
                        </li>
                    </ul>

                </div>
                <!--付款方式-->
                <div class="payment">
                    <div class="title_name">支付方式</div>
                    <ul>
                        <li><input type="radio" name="radio1" data-labelauty="支付宝"></li>
                        <li><input type="radio" name="radio1" data-labelauty="目前支付方式仅支持支付宝"></li>
                    </ul>
                </div>

                <!--产品列表-->
                <div class="Product_List">
                    <div class="envelopes">
                        选择已有优惠券
                        <select name="somename" id="somename" class="SlectBox" onchange="changeDiscount($(this).val())">
                              <option disabled="disabled" selected="selected">请选择可用优惠券</option>
                              <!--placeholder-->
                            <#list discounts as dis>
                              <option value="${dis.discountId},${dis.money},${dis.conditio}"><!--点击进行时间判断-->
                                    ${dis.name}:[${dis.conditio}-${dis.money}]
                              </option>
                            </#list>
                        </select>
                    </div>
                <!--*******************************************************************************************************************-->
                    <table>
                        <thead>
                              <tr class="title">
                                  <td class="name">商品名称</td>
                                  <td class="price">商品价格</td>
                                  <td class="Preferential">优惠价</td>
                              </tr>
                        </thead>
                        <tbody>
                        <#list list as u>
                            <tr>
                                <td class="Product_info">
                                    <a href="javascript:void(0);">
                                        <img src="/uploads/${u.book_picture}" width="100px" height="100px"/>
                                    </a>
                                    <a href="javascript:void(0);" class="product_name">${u.book_name}</a>
                                    <input type="text" hidden name="bookId" value="${u.id}">
                                </td>
                                <td><i>￥</i>${u.book_price?string.number}</td>
                                <td><i>￥</i>暂无</td>
                            </tr>
                        </#list>
                        </tbody>
                        <span id="shopid" name="shopid" style="display: none">${shopid}</span>
                    </table>
                    <!--分页*************************************************************************-->
                    <div class="Paging" id="pagenav"></div>
                    <!--价格-->
                    <div class="price_style">
                        <div class="right_direction">
                            <ul>
                                <li>
                                    <label>商品总价</label>
                                    <i>￥</i>
                                    <span>${zongjia?string.number}</span>
                                </li>
                                <li>
                                    <label>优惠金额</label>
                                    <i>￥</i>
                                    <span id="disMoney"></span>
                                </li>
                                <li>
                                    <label>配&nbsp;&nbsp;送&nbsp;&nbsp;费</label>
                                    <i>￥</i>
                                    <span>0</span>
                                </li>
                                <li class="shiji_price">
                                    <label>实&nbsp;&nbsp;付&nbsp;&nbsp;款</label>
                                    <i>￥</i>
                                    <span id="zongjia">${zongjia?string.number}</span>
                                </li>
                            </ul>
                            <div class="btn">
                                <input name="" type="button" value="提交订单" class="submit_btn" onclick="tijiao();"/>
                                <a href="/shop/toShop.do">
                                <input name="" type="button" value="返回购物车"  class="return_btn"/>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
</div>

<!--**************************************************************************************************************************************************-->
<!--底部样式-->
<!--右边-->
<div id="page">
    <div id="right"></div>
</div>
<!--尾-->
<div id="bottom"></div>

<script>
    $("#right").load("/stage/LQ_right.ftl");
    $("#top").load("/czgIndexTop/getBtype.do");
    $("#bottom").load("/stage/Czg_index_foot.ftl");

    //  显示客服聊天界面
    function showTalk(){
        layer.open({
            type:2,
            title:'客服聊天',
            fix:'false',
            maxmin:true,
            area:['800px','700px'],
            content:'/main/skipToTalk.do',
            end:function(){
            }
        })
    }

    $(function(){
        $(':input').labelauty();

    });

</script>

</body>
<script>
    var ids=0;
    var shopid="";
    //地址查询订单表中订单地址
    var Orders=new Vue({
        el:'#Orders',
        data:{
            result:[]
        }
    });
    var getOrderList=function (){
        $.ajax({
            url:'/order/chaOrder.do',
            dataType:'json',
            type:'post',
            data:{
                name:'${NowCustom.name}'
            },
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                Orders.result=msg.list;
            }
        })
    };
    getOrderList();
    //返回购物车
    function returnShop(){
        window.location='/stage/LJ_shopCart.ftl';
    };
    //获取订单id以及商品id(字符串集合)
    function huoquid(index) {
        ids=Orders.result[index].id;
        $("ul").removeClass("active");
        $(this).addClass("active");
        shopid=document.getElementById("shopid").innerHTML;
    }
    //提交订单向订单表插入一条数据
    var tijiao=function () {
        if(ids==0||shopid==""){
            layer.msg("请先选择地址");
        }else{
            layer.open({
                type:2,
                title:'请确认订单',
                fix:'false',
                maxmin:true,
                area:['350px','600px'],
                content:'/order/insert.do?ids='+ids+'&shopid='+shopid+'&zongjia='+$("#zongjia").html(),
                end:function(){

                }
            })
            //删除刚刚使用的优惠券
            var str = $("#somename").val();
            var str2 = str.split(",");
            deleteDiscount(str2[0]);
        }
    }

    //改变点击地址后地址字体颜色事件
    function changeColor(obj) {
        $(".diz").css("color","black");
        $(obj).css("color","red");
    }

    //        使用优惠券，更改结算金额
    function changeDiscount(val){
        var str = val.split(",");
        if(str[2]<${zongjia}||str[2]==${zongjia}){//总价大于满减条件
            $("#zongjia").html(('${zongjia}'-str[1]).toFixed(2));
            $("#disMoney").html(str[1]);
        }else{
            layer.msg("该优惠券不满足满减条件哦");
        }
    }

    //        删除已使用的优惠券
    function deleteDiscount(obj){
        $.ajax({
        url:'/order/deleteDiscount.do',
            type:'get',
            data:{
                id:obj
            },
        success:function (msg) {

        }
        })
    }

    //        通过Id删除图书
    function deleteBookById(){
        $("input[name=bookId]").each(function(){
            $.ajax({
                url:'/order/deleteBookById.do',
                type:'get',
                data:{
                    id:$(this).val()
                },
                success:function (msg) {
                    console.log("购物车已成功清除");
                }
            })
        })
    }

    //        新增地址
    function openAddress(){
        layer.open({
            type:2,
            title:'添加地址',
            fix:'false',
            maxmin:true,
            area:['800px','600px'],
            content:'/stage/LLUser_Address.html',
            end:function(){

            }
        })

    }
</script>
</html>